<template>
  <div v-show='!isError'>
    <div v-for="(item,i) in list" :key="i">
      <div class="mr30 mt10">
        <span class="link-color fontExtraLarge"></span>
        <video
          ref='video'
          :id="'myVideos'+i"
          class="video-js vjs-default-skin vjs-big-play-centered mt10"
        >
          <source :src="item" />
        </video>
      </div>
    </div>
  </div>
<!--  <div v-show='isError' class="errorTip"><p>视频出错了！</p></div>-->
</template>

<script>
  import videojs from 'video.js'
  // import 'videojs-contrib-hls'
  export default {
    name: "VideoScan",
    // 组件页面引入：
    props: {
      list:{
        type:Array,
        default:()=>[]
      },
      videoSrc: {
        type: String,
        default:''
      },
      posterSrc: {
        type: String,
        default:''
      },
      isError: {
        type: Boolean,
        default: false
      },
    },
    mounted() {
      let elementList=document.querySelectorAll(".video-js");
      this.element=elementList.length;  //videojs 数量赋值
      for (let index = 0; index < elementList.length; index++) {
        let id=elementList[index].getAttribute('id');
        this.$videos(id, {
          autoplay: false, //自动播放
          //   muted:false, // 是否静音,
          controls: true,//控制条
          //   techOrder: ['html5','flash'],//设置flash播放
          language: "en",// 初始化语言
          preload: "auto",// 预加载
          width:'400',
          height:'200',
          // 倍速播放
          playbackRates: [0.5, 1, 1.5, 2],
        }, function () {
          this.volume(0);
          //这个地方很重要,一旦你的muted 不起作用 ,就一定要在设置当前的视频回调中设置声音为0
          //this.play(); //这个地方也一样 ,此方法this.play()==autoplay  是有相同的效果
          this.one("playing", function () {         // 监听播放
          });

          this.one("error", function (error) {      // 监听错误
          });
        });
      }
    },
    beforeDestroy(){
      // const videoDom = this.$refs.videoRef;   //不能用document 获取节点
      // videojs(videoDom).dispose();  //销毁video实例，避免出现节点不存在 但是flash一直在执行,也避免重新进入页面video未重新声明
      for (let index = 0; index < this.element; index++) {
        this.$videos(`myVideos${index}`).dispose()
      }
    }
  }

</script>

<style scoped>

</style>
